<template>
	<view class="wrapper">
		<uni-nav-bar backgroundColor="#f3f3f3" leftText="取消" rightText="确定" title="设置标签" @clickLeft="$back()" @clickRight="confirm"></uni-nav-bar>
		<view class="center labels flex-start label-active">
			<view class="f26 label cblue" v-for="(val, index) in choiceList" :key="val.groupName">
				{{ val.groupName }}
				<image src="../../static/remove.png" mode="aspectFit" @tap="remove(index)"></image>
			</view>
		</view>
		<view class="center f30">
			<input type="text" placeholder="输入标签" class="flex" v-model="itext" />
			<view class="f30 c999" @tap="friendGroupAdd">确定</view>
		</view>
		<view class="f26 c666 title">所有标签</view>
		<view class="center labels flex-start">
			<view class="f26 label" :class="{cblue:val.check}" v-for="(val, index) in tagList" :key="index" @tap="choice(val)">{{ val.groupName }}</view>
		</view>
	</view>
</template>

<script>
import md5 from '../../common/md5.min.js';
export default {
	data() {
		return {
			showAlert: false,
			tagList: [],
			choiceList: [],
			itext: '',
			userId: ''
		};
	},
	watch:{
		tagList(){
			this.tagList.forEach(item => {
				this.choiceList.map(val => {
					if(item.groupId==val.groupId){
						return item.check=true
					}
				})
			})
		},
		choiceList(newValue){
			this.tagList.forEach(item => {
				newValue.map(val => {
					if(item.groupId==val.groupId){
						return item.check=true
					}
				})
			})
		}
	},
	onLoad(e) {
		this.userId = e.userId;
		this.friendGroupList();
	},
	methods: {
		remove(index){
			this.choiceList.splice(index,1)
		},
		choice(val) {
			this.choiceList.push(val);
		},
		confirm() {
			let groupIdStr=[]
			this.choiceList.map(item => {
				groupIdStr.push(item.groupId)
			});
			this.$ajax(this.apiList.friendGroupUpdateFriend, {
				groupIdStr: groupIdStr.join(','),
				toUserId: this.userId
			}).then(res => {
				this.$back()
			});
		},
		// 添加标签
		friendGroupAdd() {
			this.$ajax(this.apiList.friendGroupAdd, {
				groupName: this.itext
			}).then(res => {
				this.friendGroupList();
				this.$sToast('添加成功');
				this.choiceList.push(res.data)
			});
		},
		// 查询标签
		friendGroupList() {
			this.$ajax(this.apiList.friendGroupList).then(res => {
				this.tagList = res.data;
				this.choiceList=res.data.filter(item => {
					item.userIdList=item.userIdList.filter(val => {
						return val==this.userId
					})
					return item.userIdList.length>0
				})
			});
		}
	}
};
</script>

<style lang="scss">
.cblue {
	color: #0297fe;
	border: 1rpx solid #0297fe!important;
}
.center {
	background: #ffffff;
	padding: 0 30rpx;
	image {
		width: 34rpx;
		height: 34rpx;
	}
	input {
		height: 104rpx;
		line-height: 104rpx;
	}
}
.f26 {
	padding: 31rpx;
}
.labels {
	flex-wrap: wrap;
	background: #f3f3f3;
	.label {
		padding: 9rpx 30rpx;
		border-radius: 20rpx;
		margin: 24rpx 20rpx 24rpx 0;
		border: 1rpx solid #999999;
		position: relative;
		image{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: -10rpx;
			right: -10rpx;
		}
	}
}
.label-active {
	background: #ffffff;
	border-bottom: 1rpx solid #e0e0e0;
}
.c999 {
	border-left: 1rpx solid #e0e0e0;
	padding-left: 20rpx;
}
page {
	background: #f3f3f3;
}
</style>
